<template>
  <el-row v-if="function_choice !== 'query'">
    <el-button type="success" icon="add-location" size="mini" @click="add_env"></el-button>
    <el-button type="primary" icon="edit" size="mini" @click="modification_env">
    </el-button>
    <el-button type="danger" icon="delete-location" size="mini" @click="del_env_prevent"></el-button>
    <el-button icon="refresh" size="mini" @click="get_host_group"></el-button>
  </el-row>
  <el-table highlight-current-row @row-click="handleCurrentChange" :cell-style="{ padding: 0 }"
    style="font-size: 10px; width: 90%" :data="tableData">
    <el-table-column show-overflow-tooltip prop="env_name" label="环境名" class="curPointer">
      <template v-slot="{ row }">
        <span style="cursor: pointer">{{ row.env_name }}</span>
      </template>
    </el-table-column>
    <el-table-column width="50px" show-overflow-tooltip prop="env_type_text" label="类型">
      <template v-slot="{ row }">
        <span style="cursor: pointer">{{ row.env_type_text }}</span>
      </template>
    </el-table-column>
    <el-table-column show-overflow-tooltip prop="comment" label="备注">
      <template v-slot="{ row }">
        <span style="cursor: pointer">{{ row.comment }}</span>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog :title="table_title" v-model="dialogVisible" width="30%">
    <el-form ref="form" :model="form" label-width="80px" size="mini">
      <el-form-item label="组名称" prop="env_name">
        <el-input v-model="form.env_name"></el-input>
      </el-form-item>
      <el-form-item label="归属项目" prop="project_id">
        <el-input v-model="form.project_id"></el-input>
      </el-form-item>
      <el-form-item label="组类型">
        <!--        <el-input v-model="form.env_type_code"></el-input>-->
        <SysCodeInput :sys_code_type="env_type" @childClick="SysCodeClick" :sys_code_value="env_type_code" />
      </el-form-item>
      <el-form-item label="编码" prop="env_code">
        <el-input v-model="form.env_code"></el-input>
      </el-form-item>
      <el-form-item label="负责人" prop="env_ops_manage">
        <el-input v-model="form.env_ops_manage"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="comment">
        <el-input v-model="form.comment"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="click_go_env" size="mini">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog title="提示" v-model="deldialogVisible" width="30%">
    <span>确认删除选中组</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deldialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="del_env" size="mini">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
// import { ref, watch } from 'vue'

import * as Request from "@/general/request";
import SysCodeInput from "@/components/communal/sys_code_input.vue";
import { ref, reactive } from "vue";

export default {
  created() {
    this.get_host_group();
  },
  name: "hosts_group",
  props: {
    function_choice: String,
    // name: String,
  },
  components: {
    SysCodeInput,
  },
  setup(props, { emit }) {
    const env_type = ref("env_type");

    let link_data = reactive({
      pitch_on_env: "",
      env_type_code: "",
    });

    const handleCurrentChange = (val: any) => {
      if (val) {
        emit("childClick", val.env_id);
        link_data.pitch_on_env = val.env_id;
      } else {
        link_data.pitch_on_env = "";
      }
    };

    const SysCodeClick = (e) => {
      link_data.env_type_code = e;
    };
    return {
      link_data,
      env_type,
      props,
      handleCurrentChange,
      SysCodeClick,
    };
  },
  data() {
    return {
      env_type_code: "",
      deldialogVisible: false,
      table_title: "",
      tableData: [],
      dialogVisible: false,
      form: {
        env_name: "",
        project_id: "",
        env_code: "",
        env_ops_manage: "",
        comment: "",
        env_type_code: "",
      },
      // pitch_on_env: '',
    };
  },
  methods: {
    del_env_prevent() {
      if (!this.link_data.pitch_on_env) {
        this.$message.warning("请选择一个组");
        return;
      }
      this.deldialogVisible = true;
    },
    del_env() {
      this.delete_host_group();
    },
    add_env() {
      this.dialogVisible = true;
      this.table_title = "新增";
      this.$refs["form"].resetFields();
      this.env_type_code = "";
    },
    click_go_env() {
      if (this.table_title === "新增") {
        this.post_host_group();
      } else {
        this.put_host_group();
      }
    },
    modification_env() {
      if (!this.link_data.pitch_on_env) {
        this.$message.warning("请选择一个组");
        return;
      }
      this.dialogVisible = true;
      this.table_title = "编辑";
      this.get_host_group_one(this.link_data.pitch_on_env);
    },
    async get_host_group_one(env_id) {
      const response = await Request.GET(
        "/background/home/resource_management/host_group_manage",
        { env_id: env_id }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          this.form = return_data.data;
          this.env_type_code = return_data.data.sys_code;
          this.$message.success(return_data.msg);
        } else {
          this.$message.error(return_data.msg);
        }
      }
    },
    async get_host_group() {
      const response = await Request.GET(
        "/background/home/resource_management/host_group_manage", {}
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          this.tableData = return_data.data;
          this.$message.success(return_data.msg);
        } else {
          this.$message.error(return_data.msg);
        }
      }
    },
    async post_host_group() {
      this.form.env_type_code = this.link_data.env_type_code;
      const response = await Request.POST(
        "/background/home/resource_management/host_group_manage",
        this.form
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          this.$message.success(return_data.msg);
          this.get_host_group();
          this.dialogVisible = false;
          this.form = [];
        } else {
          this.$message.error(return_data.msg);
        }
      }
    },
    async put_host_group() {
      this.form.env_type_code = this.link_data.env_type_code;
      const response = await Request.PUT(
        "/background/home/resource_management/host_group_manage",
        this.form
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          this.$message.success(return_data.msg);
          this.get_host_group();
        } else {
          this.$message.error(return_data.msg);
        }
      }
    },
    async delete_host_group() {
      this.form.env_type_code = this.link_data.env_type_code;
      const response = await Request.DELETE(
        "/background/home/resource_management/host_group_manage",
        { env_ids: [this.link_data.pitch_on_env] }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          this.$message.success(return_data.msg);
          this.get_host_group();
          this.deldialogVisible = false;
        } else {
          this.$message.error(return_data.msg);
        }
      }
    },
  },
};
</script>

<style scoped>
.curPointer {
  cursor: pointer;
}
</style>
